<template>
  <Layout>
    <Sider
      class="sider"
      style="width: 350px; min-width: 350px; padding: 20px 10px; height: 665px"
    >
      <Form
        ref="formInline"
        :model="formInline"
        label-position="left"
        :label-width="80"
      >
        <FormItem label="患者姓名">
          <Input
            search
            v-model="formInline.hzName"
            enter-button
            @on-search="getSearch"
            placeholder="请输入患者姓名"
          />
        </FormItem>
        <FormItem label="诊断号">
          <Input
            search
            v-model="formInline.hzNum"
            enter-button
            @on-search="getSearch"
            placeholder="请输入就诊号"
          />
        </FormItem>
      </Form>
      <Tabs type="card" v-model="formInline.ypState" @click.native="getSearch">
        <TabPane label="已发药" name="2">
          <Alert type="success">已发药</Alert>
        </TabPane>
        <TabPane label="未发药" name="1">
          <Alert type="warning">未发药</Alert>
        </TabPane>
      </Tabs>
      <Table
        :columns="columns1"
        :data="data1"
        @on-row-click="cilckLeft"
        height="480"
      ></Table>
    </Sider>
    <Content class="content">
      <div class="rightTop">
        当前患者：
        <div>
          姓名：<span>{{ leftData.hzName }}</span>
        </div>
        <div>
          诊断号：<span>{{ leftData.hzNum }}</span>
        </div>
        <Button type="success" @click="getDispensing">发药</Button>
      </div>
      <div class="rightBottom">
        <Table :columns="columns2" :data="data2">
          <template slot-scope="{ row, index }" slot="num">
            <InputNumber
              size="small"
              :min="Number(row.drawal)"
              :max="Number(row.num)"
              v-model="tfNum[`${index}`]"
            ></InputNumber>
          </template>
        </Table>
      </div>
    </Content>
  </Layout>
</template>

<script>
import {
  listPrescription,
  updatePrescription,
} from "@/api/medicine/prescription";
import { listDruglist } from "@/api/medicine/druglist";
export default {
  data() {
    return {
      tfNum: {},
      formInline: {
        hzName: null,
        hzNum: null,
        ypState: "2",
      },
      columns1: [
        {
          title: "患者姓名",
          key: "hzName",
        },
        {
          title: "就诊号",
          key: "hzNum",
        },
      ],
      columns2: [
        {
          title: "序号",
          type: "index",
          width: "80",
          align: "center",
        },
        {
          title: "药品名称",
          key: "ypName",
          align: "center",
        },
        {
          title: "药品规格",
          key: "ypNorm",
          align: "center",
        },
        {
          title: "单位",
          key: "ypUnit",
          align: "center",
        },
        {
          title: "药品总量",
          key: "num",
          align: "center",
        },
        {
          title: "退药数量",
          align: "center",
          slot: "num",
        },
        {
          title: "药品单价",
          key: "price",
          align: "center",
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          render: (h, params) => {
            if (params.row.ypState == "1" || params.row.isOK) {
              return h(
                "Button",
                {
                  props: {
                    type: "error",
                    disabled: true,
                    size: "small",
                  },
                },
                "退药"
              );
            } else {
              return h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.clickRefund(params);
                    },
                  },
                },
                "退药"
              );
            }
          },
        },
      ],
      data1: [],
      data2: [],
      leftData: {
        hzName: "",
        hzNum: " ",
      },
      leftIndex: null
    };
  },
  created() {
    this.getSearch();
  },
  methods: {
    // 搜索
    getSearch() {
        // this.leftData={};
        // this.data2=[];
      this.leftData = this.$options.data.call(this).leftData;
      this.data2 = this.$options.data.call(this).data2;
      listPrescription(this.formInline).then((res) => {
        this.data1 = res.rows;
        if (this.leftIndex) {
          this.cilckLeft(this.data1[this.leftIndex]);
        }
      });
    },
    // 点击左侧表格
    cilckLeft(res,index) {
      if (index) {
        this.leftIndex=index;
      }
      if (res) {
        this.leftData = res;
        let arr = [];
        for (let a = 0; a < 5; a++) {
          if (res[`ypName${a}`]) {
            arr[a] = {
              ypName: res[`ypName${a}`],
              ypNorm: res[`ypNorm${a}`],
              num: res[`num${a}`],
              price: res[`price${a}`],
              drawal: res[`drawal${a}`],
              ypState: res.ypState,
              isOK:Boolean(res[`num${a}`]==res[`drawal${a}`])
            };
            this.tfNum[a] = Number(res[`drawal${a}`]);
            listDruglist({ ypName: res[`ypName${a}`] }).then((resDruglist) => {
              this.$set(arr[a], "ypUnit", resDruglist.rows[0].ypUnit);
            });
          }
        }
        this.data2 = arr;
      }
    },
    // 点击退费
    clickRefund(params) {
      this.$confirm("请选择是否退药?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warnings",
      })
        .then(() => {
          listPrescription({
            hzName: this.leftData.hzName,
            hzNum: this.leftData.hzNum,
          }).then((res) => {
            let obj = res.rows[0];
            obj[`drawal${params.index}`] = this.tfNum[`${params.index}`];
            updatePrescription(obj).then((res1) => {
              if (res1.code == 200) {
                this.getSearch();
                this.$message({
                  type: "success",
                  message: "退药成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: "退药失败!",
                });
              }
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退药",
          });
        });
    },
    getDispensing() {
      if (!this.leftData.hzName) {
        this.$message.error("请选择发药患者");
      } else {
        this.$confirm("请选择是否发药?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warnings",
        })
          .then(() => {
            if (this.leftData.ypState == "2") {
              this.$message({
                type: "error",
                message: "该用户已发药!",
              });
            } else {
              listPrescription({
                hzName: this.leftData.hzName,
                hzNum: this.leftData.hzNum,
              }).then((res) => {
                let obj = res.rows[0];
                obj.ypState = "2";
                updatePrescription(obj).then((res1) => {
                  if (res1.code == 200) {
                      this.getSearch();
                    this.$message({
                      type: "success",
                      message: "发药成功!",
                    });
                  } else {
                    this.$message({
                      type: "error",
                      message: "发药失败!",
                    });
                  }
                });
              });
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消发药",
            });
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.sider {
  background-color: #ffffff;
}
.content {
  .rightTop {
    height: 50px;
    padding: 20px;
    display: flex;
    align-items: center;
    font-size: 16px;
    & > :first-child {
      border: 1px solid #8ce6b0;
      background-color: #ffffff;
      height: 30px;
      width: 150px;
      padding: 5px;
      border-radius: 4px;
      color: #3e75eb;
      font-size: 14px;
      margin-right: 20px;
      span {
        color: black;
      }
    }
    & > :nth-child(2) {
      border: 1px solid #8ce6b0;
      background-color: #ffffff;
      height: 30px;
      width: 200px;
      padding: 5px;
      border-radius: 4px;
      color: #3e75eb;
      font-size: 14px;
      margin-right: 400px;
      span {
        color: black;
      }
    }
  }
  .rightBottom {
    padding: 20px;
    height: 620px;
    background-color: #ffffff;
  }
}
::v-deep {
  .ivu-alert {
    margin-right: 1px;
    margin-bottom: 0px;
  }
  .ivu-input-number {
    width: 50px;
  }
  .ivu-input-number-input {
    z-index: 10;
  }
}
</style>
